<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="美食天下，天下美食，美食做法">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/detail.css">
    
    <title>主页</title>
</head>
<body>
    <div class="box">
        <header>
            <h1 class="title">美食天下</h1>
            <div class="header">
                <a href="#"><img src="../img/logo.png" alt="图片无法显示"></a>
                <ul class="nav">
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="./caidan.html">菜谱</a></li>
                    <li><a href="./healthy.html">健康</a></li>
                    <li><a href="./community.html">社区</a></li>
                    <li><a href="../html/market.html">市集</a></li>
                </ul>
                <div class="logon">
                    <div class="iconfont icon-fangdajing icon">
                        <div class="hide">
                            <div>
                                <input type="text" value="搜索.....">
                                <button><span class="iconfont icon-fangdajing"></span></button>
                            </div>
                        </div>
                    </div>
                    <a href="../html/logon.html"><span class="iconfont icon-gouwuche"></span></a>
                    <a href="../html/logon.html"><span class="iconfont icon-ren"></span></a>
                    <a href="../html/logon.html"><button>登录/注册</button></a>
                </div>
            </div>
        </header>
        <main>
            <div class="price">
                <div class="container flex margin">
                    <div class="img">
                        <img src="../img/market/xiangjiao.jpg" alt="">
                        <div class="z"></div>

                        <div class="big">
                            <img src="../img/market/xiangjiao.jpg" alt=""> 
                        </div>
                    </div>
                    <div class="description padding">
                        <h2>现摘香蕉香甜大香蕉新鲜当季水果整箱10斤</h2>
                        <p class="p1">新鲜采摘浓郁香口，精品好果超好售后，给您不一样的购物体验。</p>
                        <p> 价格  <span class="sp">￥29.70</span></p>
                        <p> 有货  免运费</p>
                        <p>服务支持 <span>运费险</span> | <span>优鲜赔</span></p>
                        <div class="num">
                            <span>数量：</span>
                            <input type="text">
                        </div>
                        <div class="btn">
                        <button>立即购买</button>
                        <button class="shop">放入购物车</button>
                    </div>
                    </div>
                    <div class="more">
                       <h2>看了又看</h2>
                        <div class="more1">
                        <img src="../img/market/more1.jpg" alt="">
                        <p class="ell">广西小米蕉苹果香蕉新鲜10斤当季整箱芭蕉时令水果粉蕉5</p>
                        <p class="price">￥28.90</p>
                        </div>
                        <div class="more1">
                            <img src="../img/market/more1-1.jpg" alt="">
                            <p class="ell">广西小米蕉带箱10斤新鲜香蕉banana当季时令新鲜绿色水果整箱</p>
                            <p class="price">￥25.48</p>
                            </div>
                    </div>
                </div>
            </div>
            <div class="detail margin">
                <div class="container">
                <h3>商品详情</h3>
                <div class="parameter">
                    <p>产品参数:无</p>
                    <p>产品名称：现摘香蕉香甜大香蕉</p>
                    <p>国产/进口：国产</p>
                </div>
                <div class="goods">
                    <div class="left">
                        <h2>热门关注</h2>
                        <div class="imgl">
                        <img src="../img/market/re1.jpg" alt="">
                        <div class="txt"><p>安徽荸荠马蹄新鲜净重5斤农家自种地栗现挖批发中小红马蹄果</p></div>
                    </div>

                        <div class="imgl">
                        <img src="../img/market/re2.png" alt="">
                        <div class="txt"><p>苹果水果新鲜10斤当季一整箱带陕西脆甜红富士现应季</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re3.jpg" alt="">
                        <div class="txt"><p>烟台太婆梨香蕉梨大头梨水果新鲜当季整箱梨</p></div>
                    </div>
                        <div class="imgl">
                        <img src="../img/market/re4.png" alt="">
                        <div class="txt"><p>新鲜农家现摘小甜蜜柿5斤整箱小柿子发7-8成熟柿子</p></div>
                    </div>
                        <div class="imgl">
                        <img src="../img/market/re5.jpg" alt="">
                      
                        <div class="txt"><p>建瓯板栗生新鲜 高山锥栗农家自种油栗 当季现摘</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re6.jpg" alt="">
                        <div class="txt"><p>【正常发货】沙瓤番茄普罗旺斯新鲜蔬菜自然熟西红柿5斤装</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re7.jpg" alt="">
                        <div class="txt"><p>新鲜小号5斤临安天目山小香薯红薯农家蜜薯地瓜板栗山芋番薯</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re8.jpg" alt="">
                        <div class="txt"><p>【3斤装】秋葵新鲜蔬菜水果黄秋葵5新鲜秋葵 现摘</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re9.jpg" alt="">
                        <div class="txt"><p>云南高山新鲜红皮黄心大土豆10装农家自种新鲜大土豆马铃薯净重9斤</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re10.jpg" alt="">
                        <div class="txt"><p>建瓯板栗生新鲜 高山锥栗农家自种油栗 当季现摘</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re11.jpg" alt="">
                        <div class="txt"><p>新鲜山楂5斤生山楂果水果山里红果5糖葫芦 一斤尝鲜中果</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re12.jpg" alt="">
                        <div class="txt"><p>现货灵武长枣宁夏枣新鲜枣子水果当季整箱鲜枣 2500g</p></div>
                    </div>
                    <div class="imgl">
                        <img src="../img/market/re13.jpg" alt="">
                        <div class="txt"><p>【正常发货】沙瓤番茄普罗旺斯新鲜蔬菜自然熟西红柿5斤装</p></div>
                    </div>
                    <!-- <div class="imgl">
                        <img src="../img/market/re14.jpg" alt="">
                    </div> -->
                       
                    </div>
                    <div class="right">
                <h3>商品图</h3>
                <img src="../img/market/zhanshi1.jpg" alt="">
                <img src="../img/market/zhanshi2.jpg" alt="">
                <img src="../img/market/zhanshi3.jpg" alt="">
            </div>
            </div>
        </div>
        </div>
        <div class="recmm">
            <div class="container">
            <h2>相关推荐</h2>
            <div class="recm flex">
                <div class="rec">
                    <img src="../img/market/recm1.jpg" alt="">
                    <p class="des">新疆哈密瓜新鲜一箱水果当季整箱甜瓜网纹瓜甜瓜水果 5斤</p>

                <div class="icn"> 
                    <span>￥34.17</span>
                     <div class="icon"><span class="iconfont icon-xin"></span> 收藏
                    </div>
                 </div>
                </div>
                <div class="rec">
                    <img src="../img/market/recm2.jpg" alt="">
                    <p class="des">新鲜现摘自种白糯玉米棒带皮微甜软糯黏粘应季玉米新鲜蔬菜 现摘含箱5斤 带皮</p>
                    <div class="icn"> 
                        <span>￥34.17</span>
                         <div class="icon"><span class="iconfont icon-xin"></span> 收藏
                        </div>
                     </div>
                </div>
                <div class="rec">
                    <img src="../img/market/recm3.jpg" alt="">
                    <p class="des">冰淇淋红薯沙地花心紫薯新鲜现挖一点红农家5板栗番薯地瓜 冰淇淋中果2斤</p>
                    <div class="icn"> 
                        <span>￥34.17</span>
                         <div class="icon"><span class="iconfont icon-xin"></span> 收藏
                        </div>
                     </div>
                </div>
                <div class="rec">
                    <img src="../img/market/recm4.jpg" alt="">
                    <p class="des">现挖沙地小红薯新鲜10斤整箱农家自种板栗香薯地瓜番薯山芋</p>
                    <div class="icn"> 
                        <span>￥34.17</span>
                         <div class="icon"><span class="iconfont icon-xin"></span> 收藏
                        </div>
                     </div>
                </div>
            </div>
        </div>
            
        </div>
        </main>
        <footer class="margin">
            <div class="footer">
                <div class="footer_top">
                    <ul>
                        <li><a href="../index.html">首页</a></li>
                        <li><a href="./caidan.html">菜谱</a></li>
                        <li><a href="./healthy.html">健康</a></li>
                        <li><a href="./community.html">社区</a></li>
                        <li><a href="./market.html">市集</a></li>
                    </ul>
                    <ul>
                        <li><a href="../html/logon.html">登录</a></li>
                        <li><a href="../html/logon - 1.html">注册</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer_bottom">
                    <a href="#">关于我们</a>
                    <a href="#">English</a>
                    <a href="#">广告服务</a>
                    <a href="#">免责声明</a>
                    <p>39班第二小组全员2020-2020 ALL RIGHTS RESERVED.川ICP备xxxxxxxxxxxxxx号</p>
                </div>
            </div>
        </footer>
    </div>


    <script>
        var small=document.getElementsByClassName("img")[0];
        var large=document.getElementsByClassName("big")[0];
        var largechild=large.children[0];
        var z=document.getElementsByClassName("z")[0];
        small.onmouseleave=function(){
            large.style.display="none";
            z.style.display="none";
        }
        small.onmouseenter=function(){
            large.style.display="block";
            z.style.display="block";
        }
        small.onmousemove=function(e){
        var s=4;
        var x = e.clientX-small.offsetLeft-z.offsetWidth/2;
        var y = e.clientY-small.offsetTop-z.offsetHeight/2;
        
        //  largechild.style.left=small.offsetWidth*s+"px";
        //  largechild.style.top=small.offsetHeight*s+"px";

         if(x<0){
             x=0;
         }else if(x>small.offsetWidth-z.offsetWidth){
         x=small.offsetWidth-z.offsetWidth;
         }
         if(y<0){
           y=0;
         }else if(y>small.offsetHeight-z.offsetHeight){
             y=small.offsetHeight-z.offsetHeight;
         }
         z.style.left=x+"px";
          z.style.top=y+"px";

          var left=z.offsetLeft*s;
          var top=z.offsetTop*s;
          largechild.style.marginLeft =(left * (-1)) + "px";
		  largechild.style.marginTop =(top * (-1))+ "px";
     }
    </script>
</body>
</html>